<!-- src/views/outbound/signed/index.vue -->
<script setup>
import { onMounted, ref } from 'vue'
import { getAllByStatusApi } from '@/api/outbound/outbound'
import display from '../outbound/display.vue'
import { ElMessage } from 'element-plus'

const tableData = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)
const form = ref({
  invoiceCode: '',
  customerId: '',
  skuId: ''
})

// display组件引用
const displayRef = ref(null)

// 选中的明细列表
const selectedDetailsList = ref([])

// 状态映射
const statusMap = {
  1: '预发货',
  2: '确认发货',
  3: '拣货中',
  4: '拣货完成',
  5: '待打包',
  6: '待称重',
  7: '待发货',
  8: '已发货',
  9: '已签收'
}

// 获取已签收数据
const getSigned = async () => {
  const res = await getAllByStatusApi(
    form.value.invoiceCode,
    form.value.customerId,
    form.value.skuId,
    currentPage.value,
    pageSize.value
  )
  total.value = res.total
  tableData.value = res.rows
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  getSigned()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getSigned()
}

const search = () => {
  currentPage.value = 1
  getSigned()
}

// 查看详情
const handleViewDetails = async (row) => {
  try {
    // 添加状态映射到行数据
    const detailRow = {
      ...row,
      status: statusMap[row.status] || '未知'
    };

    selectedDetailsList.value = [detailRow]
    displayRef.value.open()
  } catch (error) {
    console.error('查看详情失败:', error)
    ElMessage.error('查看详情失败!')
  }
}

// 删除功能
const delById = (id) => {
  // TODO: 实现删除功能
}

onMounted(() => {
  getSigned()
})
</script>

<template>
  <!-- 添加display组件 -->
  <display ref="displayRef" :items="selectedDetailsList" />

  <el-form :model="form" :inline="true" style="margin-bottom: 20px;">
    <el-form-item label="发货单号">
      <el-input v-model="form.invoiceCode" placeholder="请输入发货单号" />
    </el-form-item>
    <el-form-item label="客户名称">
      <el-input v-model="form.customerId" placeholder="请输入客户姓名" />
    </el-form-item>
    <el-form-item label="商品名称">
      <el-input v-model="form.skuId" placeholder="请输入商品ID" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="status" label="状态">
      <template #default="{ row }">
        {{ statusMap[row.status] || '未知' }}
      </template>
    </el-table-column>
    <el-table-column prop="invoiceCode" label="发货单号" />
    <el-table-column prop="commodityCode" label="商品编码" />
    <el-table-column prop="description" label="商品描述" />
    <el-table-column prop="title" label="商品名称" />
    <el-table-column prop="specCode" label="规格编码" />
    <el-table-column prop="barCode" label="条码" />
    <el-table-column prop="orderCount" label="订单数量" />
    <el-table-column prop="weight" label="重量" />
    <el-table-column prop="packageSerial" label="打包流水号" />
    <el-table-column prop="weighedWeight" label="称重重量" />
    <el-table-column prop="weightsCode" label="称重单号" />
    <el-table-column prop="customerName" label="客户名称" />
    <el-table-column prop="pickChecker" label="拣货复核员" />
    <el-table-column prop="creator" label="创建人" />
    <el-table-column fixed="right" label="操作" width="200">
      <template #default="{ row }">
        <el-button size="small" @click="handleViewDetails(row)">查看</el-button>
        <el-button size="small" type="danger" @click="delById(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>